<template>
    <div class="com-container">
        <div class="header">
            <h1 class="title">条 目 监 控</h1>
        </div>
        <!-- <img class="imgSize" src="./images/title.png" alt="" /> -->
        <div class="content">
            <el-card>
                <!-- 饼图1 -->
                <ItemPieHollow
                    :title="'条目状态'"
                    :info="{
                        name: '条目状态',

                        total: itemStatusData.total || 0,
                    }"
                    :data="itemStatusData.data || []"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    type="'item-status'"
                    ref="itemStatus"
                    @refresh="refresh"
                ></ItemPieHollow>
            </el-card>
            <el-card>
                <!-- 饼图2 -->
                <ItemPieFilled
                    :title="'特殊计算项'"
                    :data="specialCalculationData.data || []"
                    :info="{
                        name: '特殊计算项',

                        total: specialCalculationData.total || 0,
                    }"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    type="'special-calculation'"
                    ref="specialCalculation"
                    @refresh="refresh"
                ></ItemPieFilled>
            </el-card>
            <el-card>
                <!-- 饼图2 -->
                <ItemPieFilled
                    :title="'分母'"
                    :data="denominatorData.data || []"
                    :info="{
                        name: '分母',

                        total: denominatorData.total || 0,
                    }"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    type="'denominator'"
                    ref="denominator"
                    @refresh="refresh"
                ></ItemPieFilled>
            </el-card>
            <el-card>
                <!-- 饼图2 -->
                <ItemPieFilled
                    :title="'动态维度模板'"
                    :data="dynamicDenominatorTempData.data || []"
                    :info="{
                        name: '动态维度模板',

                        total: dynamicDenominatorTempData.total || 0,
                    }"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    type="'dynamic-dimension-template'"
                    ref="dynamicDimensionTemplate"
                    @refresh="refresh"
                ></ItemPieFilled>
            </el-card>
            <el-card>
                <!-- 饼图2 -->
                <ItemPieFilled
                    :title="'动态维度'"
                    :data="dynamicDenominatorData.data || []"
                    :info="{
                        name: '动态维度',

                        total: dynamicDenominatorData.total || 0,
                    }"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    type="'dynamic-dimension'"
                    ref="dynamicDimension"
                    @refresh="refresh"
                ></ItemPieFilled>
            </el-card>
        </div>
        <div class="content-second">
            <el-card>
                <!-- 饼图1 -->
                <ItemPieHollow
                    :title="'条目同步概况'"
                    :info="{
                        name: '条目同步概况',
                        total: itemSyncOverviewData.total || 0,
                    }"
                    :data="itemSyncOverviewData.data"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    type="'item-sync-overview'"
                    ref="itemSyncOverview"
                    @refresh="refresh"
                ></ItemPieHollow>
            </el-card>
            <el-card>
                <!-- 折线图 -->
                <ItemLine
                    :info="{
                        name: '条目同步走势',
                    }"
                    :data="itemSyncLineData"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    @generate-trend="generateTrend"
                    ref="itemSyncTrend"
                    @refresh="refresh"
                ></ItemLine>
            </el-card>
        </div>
        <div class="content-third">
            <el-card>
                <ItemBar
                    :info="{
                        name: '条目同步参数',
                    }"
                    :data="itemSyncParamsData"
                    :riskEntryTypeObj="riskEntryTypeObj"
                    ref="itemSyncParam"
                    @refresh="refresh"
                ></ItemBar>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import ItemBar from './item-monitor/item-bar.vue';
import ItemLine from './item-monitor/item-line.vue';
import ItemPieHollow from './item-monitor/item-pie-hollow.vue';
import ItemPieFilled from './item-monitor/item-pie-filled.vue';
import {
    getDySurvey,
    getDyTemplateSurvey,
    getStateSurvey,
    getSyncSurvey,
    querySpecialurvey,
    querySyncParam,
    querySyncTrend,
} from './api/item-monitor';
import * as moment from 'moment';
@Component({
    name: 'ItemMonitor',
    components: {
        ItemPieHollow,
        ItemPieFilled,
        ItemLine,
        ItemBar,
    },
})
export default class ItemMonitor extends Vue {
    chartInstanceArr: any[] = [];
    chartComponent: any[] = [
        'itemStatus',
        'specialCalculation',
        'denominator',
        'dynamicDimensionTemplate',
        'dynamicDimension',
        'itemSyncOverview',
        'itemSyncTrend',
        'itemSyncParam',
    ];
    specialCalculationData: any = {}; // 特殊计算项
    itemStatusData: any = {}; // 条目状态
    denominatorData: any = {}; // 分母
    dynamicDenominatorData: any = {}; // 动态维度
    dynamicDenominatorTempData: any = {}; // 动态维度模板
    itemSyncOverviewData: any = {}; // 条目同步概况
    itemSyncParamsData: any = {}; // 条目同步参数
    itemSyncLineData: any = {}; // 条目同步走势
    TimeSendMessageFirst = null;
    TimeSendMessageSecond = null;

    riskEntryTypeObj: any = {}; // 类别
    // 走势参数
    lineParams = {
        beginDate: moment(new Date()).format('yyyyMMDD'),
        endDate: moment(new Date()).format('yyyyMMDD'),
    };
    async mounted() {
        this.getAllChartsData();

        await this.getItemTypeOptions();
        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();

        this.TimeSendMessageFirst && clearInterval(this.TimeSendMessageFirst);
        this.setTFirst();

        this.TimeSendMessageSecond && clearInterval(this.TimeSendMessageSecond);
        this.setTSecond();
    }

    // 获取页面全部数据
    getAllChartsData() {
        // 条目状态
        this.getStateSurvey();

        // 特殊计算
        this.querySpecialurvey();

        // 分母
        this.queryDenominator();

        // 动态维度模板
        this.getDyTemplateSurvey();

        // 动态维度
        this.getDySurvey();

        // 条目同步概况
        this.getSyncSurvey();

        // 条目同步走势
        this.querySyncTrend();

        // 条目同步参数
        this.querySyncParam();
    }

    // 条目状态
    getStateSurvey(operateType?: string) {
        getStateSurvey(operateType).then((res: any) => {
            this.itemStatusData = res;
            this.itemStatusData.data = this.handleData(this.itemStatusData);
        });
    }

    // 特殊计算
    querySpecialurvey(operateType?: string) {
        querySpecialurvey('1', operateType).then((res: any) => {
            this.specialCalculationData = res;
            this.specialCalculationData.data = this.handleData(this.specialCalculationData);
        });
    }

    // 分母
    queryDenominator(operateType?: string) {
        querySpecialurvey('2', operateType).then((res: any) => {
            this.denominatorData = res;
            this.denominatorData.data = this.handleData(this.denominatorData);
        });
    }

    // 动态维度模板
    getDyTemplateSurvey(operateType?: string) {
        getDyTemplateSurvey(operateType).then((res: any) => {
            this.dynamicDenominatorTempData = res;
            this.dynamicDenominatorTempData.data = this.handleData(this.dynamicDenominatorTempData);
        });
    }

    // 动态维度
    getDySurvey(operateType?: string) {
        getDySurvey(operateType).then((res: any) => {
            this.dynamicDenominatorData = res;
            this.dynamicDenominatorData.data = this.handleData(this.dynamicDenominatorData);
        });
    }

    // 条目同步概况
    getSyncSurvey(operateType?: string) {
        getSyncSurvey(operateType).then((res: any) => {
            this.itemSyncOverviewData = res;
            this.itemSyncOverviewData.data = this.handleData(this.itemSyncOverviewData);
        });
    }

    // 条目同步走势
    querySyncTrend(operateType?: string) {
        querySyncTrend(this.lineParams, operateType).then((res: any) => {
            this.itemSyncLineData = res;
        });
    }

    // 条目同步参数
    querySyncParam(operateType?: string) {
        let date = moment(new Date()).format('yyyyMMDD');
        querySyncParam(date, operateType).then((res: any) => {
            this.itemSyncParamsData = res;
        });
    }

    // 获取类别可选对象
    getItemTypeOptions() {
        this.riskEntryTypeObj = {};
        return new Promise((resolve, reject) => {
            this.$axios
                .get('/maintenance/entry/entryType')
                .then((res: any) => {
                    res.forEach(element => {
                        if (element.sourceCode != 'V') {
                            this.riskEntryTypeObj[element.sourceCode] = element.sourceCode + '类';
                        }
                    });
                    console.log(this.riskEntryTypeObj, ' this.riskEntryTypeObj');
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    // 1分钟刷新条目同步
    setTFirst() {
        let funcArr = [this.getStateSurvey, this.querySpecialurvey, this.queryDenominator, this.getDyTemplateSurvey, this.getDySurvey];
        this.TimeSendMessageFirst = setInterval(() => {
            for (let index = 0; index < funcArr.length; index++) {
                (function(t) {
                    setTimeout(function() {
                        funcArr[index]('autoRefresh');
                    }, 200 * t); // 还是每200ms执行一次，不是累加的
                })(index);
            }
        }, 60 * 1000);
    }

    // 5-10分钟刷新条目同步
    setTSecond() {
        let funcArr = [this.getSyncSurvey, this.querySyncTrend, this.querySyncParam];
        this.TimeSendMessageSecond = setInterval(() => {
            for (let index = 0; index < funcArr.length; index++) {
                (function(t) {
                    setTimeout(function() {
                        funcArr[index]('autoRefresh');
                    }, 200 * t);
                })(index);
            }
        }, 60 * 1000 * Math.round(Math.random() * 5 + 5));
    }

    // 清除定时器
    beforeDestroy() {
        if (this.TimeSendMessageFirst) {
            this.TimeSendMessageFirst && clearInterval(this.TimeSendMessageFirst);
            this.TimeSendMessageFirst = null;
        }

        if (this.TimeSendMessageSecond) {
            this.TimeSendMessageSecond && clearInterval(this.TimeSendMessageSecond);
            this.TimeSendMessageSecond = null;
        }
    }

    // 处理接口数据
    handleData(data: any) {
        let items = data.items || [];
        return items.map(item => {
            item.name = item.itemStatusName;
            item.value = item.itemCount;
            return item;
        });
    }

    // 生成走势图回调
    async generateTrend(timeRange: any) {
        this.lineParams = timeRange;
        this.itemSyncLineData = await querySyncTrend(timeRange);
    }

    screenAdapter() {
        const titleFontSize = ((this.$refs.itemStatus as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    // barWidth: titleFontSize,
                    // 条目文字配置
                    // itemStyle: {
                    //   barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
                    // }
                },
            ],
        };
        this.chartInstanceArr.forEach(ele => {
            ele.setOption(adapterOption);
            ele.resize();
        });
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }

    // 刷新页面
    refresh(name: string) {
        if (name == '条目状态') {
            this.getStateSurvey();
        } else if (name == '特殊计算项') {
            this.querySpecialurvey();
        } else if (name == '分母') {
            this.queryDenominator();
        } else if (name == '动态维度') {
            this.getDySurvey();
        } else if (name == '动态维度模板') {
            this.getDyTemplateSurvey();
        } else if (name == '条目同步概况') {
            this.getSyncSurvey();
        } else if (name == '条目同步走势') {
            this.querySyncTrend();
        } else {
            this.querySyncParam();
        }

        this.yh_message_success('刷新成功');
    }
}
</script>

<style lang="scss" scoped>
.com-container {
    .header {
        width: 100%;
        height: 60px;
        // img {
        //     width: 100%;
        //     height: 60px;
        // }
        background-image: url('./images/title.png');
        background-size: 100%;
        background-color: #fff;
        .title {
            font-size: 24px;
            // font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #107fff;
            line-height: 33px;
            letter-spacing: 20px;
            text-align: center;
            height: 100%;
            line-height: 60px;
        }
    }
    width: 100%;
    min-width: 1300px;
    height: 100%;
    // min-height: 695px;
    min-height: 783px;
    background-color: #cae6fe;
    .title {
        color: #1980fc;
        text-align: center;
    }
    .imgSize {
        width: 100%;
    }
    .content {
        display: grid;
        gap: 0px 2px;
        grid-template-columns: repeat(5, 1fr);
        height: 31%;
        margin: 0 2px;
    }
    .content-second {
        margin: 2px;
        display: grid;
        gap: 0px 2px;
        grid-template-columns: 1fr 4fr;
        height: 31%;
    }
    .content-third {
        height: calc(38% - 67px);
        margin: 0 2px;
    }
}

/deep/ .el-card {
    height: 100%;
    .el-card__body {
        padding: 2px !important;
        width: 100%;
        height: 100%;
    }
}
</style>
